<template>
    <div class="card-item" v-loading="loading">
        <div class="h-full flex flex-col justify-between">
            <div class="item-title">
                <div>{{ $t('stats.user.retention.title.sign') }}</div>
                <div>
                    <component-page-org-tree-option-check size="small" v-model="filterOption.plat_code" @change="filterChange"></component-page-org-tree-option-check>
                    <component-page-option-datetime-range type="daterange" size="small" align="right"
                                                          :clearable="false" class="w-60" :init-last-day="60"
                                                          v-model="filterOption.datetime" @change="filterChange">
                    </component-page-option-datetime-range>
                </div>
            </div>
            <el-table style="width: 100%" border
                      :data="dataList"
                      :cell-class-name="tableCellClass"
                      :default-sort="{prop: 'timed', order: 'descending'}"
                      @sort-change="filterOrderChange">
                <el-table-column align="center" min-width="140" :label="$t('stats.user.retention.day')" prop="timed" sortable="custom" :sort-orders="['descending', 'ascending']" fixed="left">
                    <template slot-scope="scope">
                        <component-page-timestamp timezone="PRC" :timestamp="scope.row.timed" type="day"></component-page-timestamp>
                    </template>
                </el-table-column>
                <el-table-column align="center" :label="$t('stats.user.retention.sign_num')">
                    <template slot-scope="scope" v-if="scope.row['drr_1_num'] != null">
                        <component-page-numeral :num="scope.row.drr_1_num"></component-page-numeral>
                    </template>
                </el-table-column>
                <el-table-column align="right" :label="$t('stats.user.retention.drr_1')">
                    <template slot-scope="scope" v-if="scope.row['drr_1_num'] != null">
                        <div class="font-color-first font-weight-bold">
                            <component-page-numeral :num="scope.row.drr_1_num / scope.row.drr_1_num" format="0.[00]%"></component-page-numeral>
                        </div>
                        <div class="font-size-fourth">
                            <component-page-numeral :num="scope.row.drr_1_num"></component-page-numeral>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column align="right" :label="$t('stats.user.retention.drr_2')" prop="2">
                    <template slot-scope="scope" v-if="scope.row['drr_1_num'] != null && scope.row['drr_2_num'] != null">
                        <div class="font-color-first font-weight-bold">
                            <component-page-numeral :num="scope.row.drr_2_num / scope.row.drr_1_num" format="0.[00]%"></component-page-numeral>
                        </div>
                        <div class="font-size-fourth">
                            <component-page-numeral :num="scope.row.drr_2_num"></component-page-numeral>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column align="right" :label="$t('stats.user.retention.drr_n',{n:i})"
                                 v-for="i in [3,7,15,30]" :key="i" :prop="String(i)">
                    <template slot-scope="scope" v-if="scope.row['drr_1_num'] != null && scope.row[`drr_${i}_num`] != null">
                        <div class="font-color-first font-weight-bold">
                            <component-page-numeral :num="scope.row[`drr_${i}_num`] / scope.row.drr_1_num" format="0.[00]%"></component-page-numeral>
                        </div>
                        <div class="font-size-fourth">
                            <component-page-numeral :num="scope.row[`drr_${i}_num`]"></component-page-numeral>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <div class="text-right p-3">
                <el-pagination background layout="total, sizes, prev, pager, next, jumper"
                               :page-sizes="[10, 15, 20, 30, 40, 50, 100]"
                               :current-page="filterOption.page"
                               :page-size.sync="filterOption.page_size"
                               :total="dataMeta.total"
                               @size-change="filterChange"
                               @current-change="filterPageChange">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            loading: false,
            filterOption: {
                plat_code: [],
                datetime: [],
                page: 1,
                page_size: 15,
                order: 'desc',
            },
            dataMeta: {
                total: 0,
            },
            dataList: [],
            initStatus: 0,
        }
    },
    methods: {
        tableCellClass({row, column}) {
            let rate = 0;
            if (row.drr_1_num != null && row.drr_1_num > 0) {
                rate = row[`drr${column.property}_num`] / row.drr_1_num;
            }
            if (rate > 0.8) {
                return 'bg-red-50';
            } else if (rate > 0.5) {
                return 'bg-yellow-50';
            } else if (rate > 0.3) {
                return 'bg-blue-100 bg-opacity-50';
            } else if (rate > 0.1) {
                return 'bg-blue-50 bg-opacity-50';
            }
        },
        clearFilterOption() {
            this.filterOption.page = 1;
        },
        filterChange() {
            this.clearFilterOption();
            this.getDataList();
        },
        filterPageChange(page) {
            this.filterOption.page = page;
            this.getDataList();
        },
        filterOrderChange(scope) {
            this.clearFilterOption();
            this.filterOption.order = scope.order == 'ascending' ? 'asc' : 'desc';
            this.getDataList();
        },
        getDataList() {
            this.loading = true;
            axios.get('/stats/user/retention/sign', {
                params: this.filterOption
            }).then((response) => {
                if (response.data.resp_msg.code == 200) {
                    this.dataMeta = response.data.resp_data.meta;
                    this.dataList = response.data.resp_data.data;
                } else {
                    this.$message({
                        type: 'error',
                        message: response.data.resp_msg.message,
                        showClose: true
                    });
                }
                this.loading = false;
            })
        },
    },
};
</script>

<style scoped>

</style>
